<template>
  <div class="prehospital-summary">
    <div class="prehospital-summary_content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>急救转运时间趋势</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>转运病人</div>
            <div>数据取值：</div>
            <div>1.“入院信息”中“到达医院大门时间”与“120离开现场时间”的差值</div>
            <div>2.按月统计，1个病例计1例，无重复计算，计算公式中一个或两个时间点未填写的病例不计</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年"</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div style="position: absolute; left: 45%; top: -1%;line-height: 36px; z-index: 999;" />
          <div id="get-emergency-transfer-time" class="transferred-hospital" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全院收治病人数量趋势</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>所有卒中病例</div>
            <div>数据取值：</div>
            <div>1.取建档病例数量；</div>
            <div>2.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div style="position: absolute; left: 45%; top: -1%;line-height: 36px; z-index: 999;" />
          <div id="get-patient-num" class="transferred-hospital" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>来院方式分布情况统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover">
            <div>考核对象：</div>
            <div>所有卒中病例</div>
            <div>数据取值：</div>
            <div>1.全部病例“来院方式”的类型分布和占比情况；</div>
            <div>2.总数=各方式数量，每类数量/总数=该类占比</div>
            <div>3.统计“来院方式”为本院急救车、当地120、外院转院、自行来院、在院卒中的病例，未填写计入“未知”</div>
            <div>4.按月统计，1个病例计为1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div class="dignosis-content" style="position: relative;">
          <div style="position: relative;left: 30.5%;">总计:{{ comingWayNum }}例</div>
          <div id="get-coming-way-num" class="transferred-hospital" />
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全院转院病例统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover" style="margin-left: 5px;">
            <div>考核对象：</div>
            <div>转诊病例</div>
            <div>数据取值：</div>
            <div>1.总数=转入+转出</div>
            <div>2.转入/总数=转入占比</div>
            <div>3.转出/总数=转出占比</div>
            <div>4.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <div id="getHospitalTransfer" class="transferred-hospital" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全院转院病例来源统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover" style="margin-left: 5px;">
            <div>考核对象：</div>
            <div>转入本院的病例</div>
            <div>数据取值：</div>
            <div>1.取“转院类型”所填写的医院名称</div>
            <div>2.总数=各医院转入病例总数</div>
            <div>3.该医院转入病例数量/总数=该医院转入占比</div>
            <div>4.按填写过的医院名称分类统计，未填写计入“未知”</div>
            <div>5.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年"</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <el-table :data="tableInData" height="500px" border style="width: 100%">
          <el-table-column prop="patientName" align="center" label="时间范围">
            <template slot-scope="scope">
              {{ scope.row.year + '-' + scope.row.month }}
            </template>
          </el-table-column>
          <el-table-column prop="hospitalName" align="center" label="医院名称" />
          <el-table-column prop="transferInNum" align="center" label="转入病例数量(例)" />
          <el-table-column prop="transferPercentage" align="center" label="占比(%)" />
        </el-table>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全院转院病例去向统计</span>
          <el-popover placement="bottom" title="说明" width="400" trigger="hover" style="margin-left: 5px;">
            <div>考核对象：</div>
            <div>转出本院的病例</div>
            <div>数据取值：</div>
            <div>1.取“出院信息”所填写的医院名称</div>
            <div>2.总数=转出至各医院的病例总数；</div>
            <div>3.转出至该医院病例数量/总数=转出至该医院占比</div>
            <div>4.按填写过的医院名称分类统计，未填写计入“未知”</div>
            <div>5.按月统计，1个病例计1例，无重复计算</div>
            <div>查询筛选：</div>
            <div>时间-年份、季度、月份；</div>
            <div>默认显示本年"</div>
            <i slot="reference" class="el-icon-info" style="color: #42cece;" />
          </el-popover>
        </div>
        <el-table :data="tableOutData" height="500px" border style="width: 100%">
          <el-table-column prop="patientName" align="center" label="时间范围">
            <template slot-scope="scope">
              {{ scope.row.year + '-' + scope.row.month }}
            </template>
          </el-table-column>
          <el-table-column prop="hospitalName" align="center" label="医院名称" />
          <el-table-column prop="transferOutNum" align="center" label="转出病例数量(例)" />
          <el-table-column prop="transferPercentage" align="center" label="占比(%)" />
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {
  getEmergencyTransferTime,
  getTransferOutNums,
  getTransferInNums,
  getComingWayNum,
  getHospitalTransfer,
  getPatientNum
} from '@/api/statistical/statisticStroke'

export default {
  props: ['preYear', 'preQuarter', 'preMonth', 'preMonthRange'],
  data() {
    return {
      comingWayNum: 0,
      year: '',
      quarter: '',
      month: '',
      monthRange: [],
      tableInData: [],
      tableOutData: []
    }
  },
  mounted() {},
  methods: {
    search() {
      this.year = this.preYear
      this.quarter = this.preQuarter
      this.month = this.preMonth
      this.monthRange = this.preMonthRange
      this.initApi()
    },
    initApi() {
      this.strokeGetComingWayNum()
      this.strokeGetEmergencyTransferTime()
      this.strokeGetPatientNum()
      this.getTransferOutNums()
      this.getTransferredCasesIn()
      this.getTransferredCasesOut()
    },
    notHaveData(chart) {
      chart.showLoading({
        text: '暂无数据',
        fontSize: 18,
        left: 'center',
        color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
        textColor: '#000', // 文字颜色
        maskColor: 'rgba(255, 255, 255, 0)' // 背景色
      })
    },

    // 急救运转时间
    strokeGetEmergencyTransferTime() {
      const chartDom = document.getElementById('get-emergency-transfer-time')
      const myChart = echarts.init(chartDom)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      // console.log(this.$store.getters.hospitalName,"this.$store")
      getEmergencyTransferTime({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (res.data) {
          if (!res.data.avgEmergencyTransferTimes || res.data.avgEmergencyTransferTimes.length === 0) {
            this.notHaveData(myChart)
            return
          }
          const timeLine = []
          const showDataList = []
          res.data.avgEmergencyTransferTimes.forEach(el => {
            timeLine.push(el.year + '-' + el.month)
            showDataList.push(el.avgQuotaMinute)
          })
          const option = {
            color: ['#027DB4'],
            title: {
              text: '',
              subtext: '',
              left: 'center'
            },
            xAxis: {
              name: '',
              type: 'category',
              data: timeLine
            },
            yAxis: {
              name: '(分钟)',
              type: 'value'
            },
            series: [
              {
                data: showDataList,
                type: 'line',
                label: {
                  show: true,
                  position: 'top'
                },
                smooth: true
              }
            ]
          }
          myChart.setOption(option)
        } else {
          this.notHaveData(myChart)
        }
      })
    },
    // 全员病人收治人数
    strokeGetPatientNum() {
      const chartDom = document.getElementById('get-patient-num')
      const myChart = echarts.init(chartDom)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getPatientNum({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : ''
      }).then(res => {
        if (res.data) {
          if (!res.data.patientNums || res.data.patientNums.length === 0) {
            this.notHaveData(myChart)
            return
          }
          const timeLine = []
          const showDataList = []
          res.data.patientNums.forEach(el => {
            timeLine.push(el.year + '-' + el.month)
            showDataList.push(el.patientNum)
          })
          const option = {
            color: ['#027DB4'],
            title: {
              text: '',
              subtext: '',
              left: 'center'
            },
            xAxis: {
              name: '',
              type: 'category',
              data: timeLine
            },
            yAxis: {
              name: '(例)',
              type: 'value'
            },
            series: [
              {
                data: showDataList,
                type: 'line',
                label: {
                  show: true,
                  position: 'top'
                },
                smooth: true
              }
            ]
          }
          myChart.setOption(option)
        } else {
          this.notHaveData(myChart)
        }
      })
    },
    // 全院转院病例统计
    getTransferOutNums() {
      const transferredHospital = document.getElementById('getHospitalTransfer')
      const myChart = echarts.init(transferredHospital)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getHospitalTransfer({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange[0] ? this.monthRange[0] : '',
        endTime: this.monthRange[1] ? this.monthRange[1] : ''
      }).then(res => {
        if (res.code == 0) {
          if (res.data) {
            const timeLine = []
            const transferInList = []
            const transferOutList = []
            const transferInOutList = []
            if (res.data.transferInOutNumList && res.data.transferInOutNumList.length > 0) {
              res.data.transferInOutNumList.forEach(el => {
                const timeData = el.year + '-' + el.month
                timeLine.push(timeData)
                transferInList.push(el.transferInNum ? el.transferInNum : 0)
                transferOutList.push(el.transferOutNum ? el.transferOutNum : 0)
                transferInOutList.push(el.transferInOutNum ? el.transferInOutNum : 0)
              })

              const option = {
                color: ['#027DB4', '#F59A23', '#D9001BA1'],
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                legend: {
                  // orient: 'vertical',
                  // right: 0,
                  // top: '50px',
                  formatter: name => {
                    if (name == '转院病人总数') {
                      return name + '：' + (res.data.totalTransfer ? res.data.totalTransfer : 0) + '例'
                    }
                    if (name == '外院转入总数') {
                      return name + '：' + (res.data.subtotalTransferIn ? res.data.subtotalTransferIn : 0) + '例' + ' ' + (res.data.percentTransferIn ? res.data.percentTransferIn : 0) + '%'
                    }
                    if (name == '本院转出总数') {
                      return name + '：' + (res.data.subtotalTransferOut ? res.data.subtotalTransferOut : 0) + '例' + ' ' + (res.data.percentTransferOut ? res.data.percentTransferOut : 0) + '%'
                    }
                  }
                },
                xAxis: {
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  data: timeLine
                },
                yAxis: {
                  name: '例',
                  type: 'value'
                },
                series: [{
                  name: '转院病人总数',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true,
                    position: 'top'
                  },
                  data: transferInOutList
                }, {
                  name: '外院转入总数',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true,
                    position: 'top'
                  },
                  data: transferInList
                }, {
                  name: '本院转出总数',
                  type: 'bar',
                  barWidth: 20,
                  label: {
                    show: true,
                    position: 'top'
                  },
                  data: transferOutList
                }]
              }

              myChart.setOption(option)
            } else {
              this.notHaveData(myChart)
            }
          }
        } else {
          this.notHaveData(myChart)
        }
      })
    },

    // 来源方式分布情况统计
    strokeGetComingWayNum() {
      const chartDom = document.getElementById('get-coming-way-num')
      const myChart = echarts.init(chartDom)
      myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      getComingWayNum({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange[0] ? this.monthRange[0] : '',
        endTime: this.monthRange[1] ? this.monthRange[1] : ''
      }).then(res => {
        if (!res.data) {
          this.notHaveData(myChart)
          return
        }
        this.comingWayNum = res.data.total
        if (!this.comingWayNum || this.comingWayNum === 0) {
          this.notHaveData(myChart)
          return
        }
        const numComingWay1 = res.data.comingWayNum.numComingWay1
        const numComingWay2 = res.data.comingWayNum.numComingWay2
        const numComingWay3 = res.data.comingWayNum.numComingWay3
        const numComingWay4 = res.data.comingWayNum.numComingWay4
        const numComingWay5 = res.data.comingWayNum.numComingWay5
        const numComingWayUnknown = res.data.comingWayNum.numComingWayUnknown

        const comingWay1 = res.data.comingWayPercentage.comingWay1
        const comingWay2 = res.data.comingWayPercentage.comingWay2
        const comingWay3 = res.data.comingWayPercentage.comingWay3
        const comingWay4 = res.data.comingWayPercentage.comingWay4
        const comingWay5 = res.data.comingWayPercentage.comingWay5
        const comingWayUnknown = res.data.comingWayPercentage.comingWayUnknown

        const diagMain = [{ value: numComingWay1, name: '本院急救车', rate: comingWay1 },
          { value: numComingWay2, name: '当地120', rate: comingWay2 },
          { value: numComingWay3, name: '外院转院', rate: comingWay3 },
          { value: numComingWay4, name: '自行来院', rate: comingWay4 },
          { value: numComingWay5, name: '在院卒中', rate: comingWay5 },
          { value: numComingWayUnknown, name: '未知', rate: comingWayUnknown }]

        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: '30%',
            formatter: name => {
              const nameList = diagMain.filter(item => {
                return item.name === name
              })
              return nameList[0].name + '：' + nameList[0].value + '例' + ' ' + nameList[0].rate + '%'
            }
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: diagMain,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
      })
    },

    // 全院转院病例来源统计
    getTransferredCasesIn() {
      this.tableInData = []
      getTransferInNums({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange[0] ? this.monthRange[0] : '',
        endTime: this.monthRange[1] ? this.monthRange[1] : ''
      }).then(res => {
        if (res.code == 0) {
          if (res.data) {
            if (res.data.transferInHospitalNums && res.data.transferInHospitalNums.length > 0) {
              this.tableInData = res.data.transferInHospitalNums
              let temp_data = []
              for (let i = 0; i < this.tableHeader1.length; i++) {
                temp_data.push(
                  {
                    text: this.tableHeader1[i],
                    options: this.dataAll.qyzyblly.options1
                  }
                )
              }
              this.dataAll.qyzyblly.data.push(temp_data)
              temp_data = []
              for (let i = 0; i < this.tableInData.length; i++) {
                temp_data = []
                if (i === 0 || i % 2 === 0) {
                  temp_data.push({
                    text: this.tableInData[i].year + '-' + this.tableInData[i].month,
                    options: this.dataAll.qyzyblly.options2
                  })
                  temp_data.push({
                    text: this.tableInData[i].hospitalName,
                    options: this.dataAll.qyzyblly.options2
                  })
                  temp_data.push({
                    text: this.tableInData[i].transferInNum,
                    options: this.dataAll.qyzyblly.options2
                  })
                  temp_data.push({
                    text: this.tableInData[i].transferPercentage,
                    options: this.dataAll.qyzyblly.options2
                  })
                } else {
                  temp_data.push({
                    text: this.tableInData[i].year + '-' + this.tableInData[i].month,
                    options: this.dataAll.qyzyblly.options3
                  })
                  temp_data.push({
                    text: this.tableInData[i].hospitalName,
                    options: this.dataAll.qyzyblly.options3
                  })
                  temp_data.push({
                    text: this.tableInData[i].transferInNum,
                    options: this.dataAll.qyzyblly.options3
                  })
                  temp_data.push({
                    text: this.tableInData[i].transferPercentage,
                    options: this.dataAll.qyzyblly.options3
                  })
                }
                this.dataAll.qyzyblly.data.push(temp_data)
              }
            }
          }
        }
      })
    },
    // 全院转院病例去向统计
    getTransferredCasesOut() {
      this.tableOutData = []
      getTransferOutNums({
        hospitalId: this.$store.getters.hospitalId,
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange[0] ? this.monthRange[0] : '',
        endTime: this.monthRange[1] ? this.monthRange[1] : ''
      }).then(res => {
        if (res.code == 0) {
          if (res.data) {
            if (res.data.transferOutHospitalNums && res.data.transferOutHospitalNums.length > 0) {
              this.tableOutData = res.data.transferOutHospitalNums
              let temp_data = []
              for (let i = 0; i < this.tableHeader2.length; i++) {
                temp_data.push(
                  {
                    text: this.tableHeader2[i],
                    options: this.dataAll.qyzyblly2.options1
                  }
                )
              }
              this.dataAll.qyzyblly2.data.push(temp_data)
              temp_data = []
              for (let i = 0; i < this.tableOutData.length; i++) {
                temp_data = []
                if (i === 0 || i % 2 === 1) {
                  temp_data.push({
                    text: this.tableOutData[i].year + '-' + this.tableOutData[i].month,
                    options: this.dataAll.qyzyblly2.options2
                  })
                  temp_data.push({
                    text: this.tableOutData[i].hospitalName,
                    options: this.dataAll.qyzyblly2.options2
                  })
                  temp_data.push({
                    text: this.tableOutData[i].transferOutNum,
                    options: this.dataAll.qyzyblly2.options2
                  })
                  temp_data.push({
                    text: this.tableOutData[i].transferPercentage,
                    options: this.dataAll.qyzyblly2.options2
                  })
                } else {
                  temp_data.push({
                    text: this.tableOutData[i].year + '-' + this.tableOutData[i].month,
                    options: this.dataAll.qyzyblly2.options3
                  })
                  temp_data.push({
                    text: this.tableOutData[i].hospitalName,
                    options: this.dataAll.qyzyblly2.options3
                  })
                  temp_data.push({
                    text: this.tableOutData[i].transferOutNum,
                    options: this.dataAll.qyzyblly2.options3
                  })
                  temp_data.push({
                    text: this.tableOutData[i].transferPercentage,
                    options: this.dataAll.qyzyblly2.options3
                  })
                }
                this.dataAll.qyzyblly2.data.push(temp_data)
              }
            }
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.prehospital-summary {
  width: 100%;
  height: 100%;

  &_content {
    height: calc(100% - 59px);
    overflow-y: auto;
  }

  .transferred-hospital {
    height: 400px;
  }

  .box-card+.box-card {
    margin-top: 5px;
  }

  /deep/.el-radio__label {
    line-height: 38px;
  }
}
</style>
